<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改自然灾害题库')" />
    <style>
        .selectDiv{
            margin-left: 20px;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <input name="id" th:field="*{id}" type="hidden">
    <div th:each="quest,stat:${itemList}">

        <div>
            <span th:text="${stat.index}+1"></span>
            <span th:text="${quest.zrQuestionBank.title}"></span>
            <br/>
            <span th:if="${quest.isSure==1}" style="color: #1a7bb9">正确答案：<span th:text="${quest.zrQuestionBank.answer}"></span></span>
            <span th:if="${quest.isSure==0}" style="color:red">正确答案：<span th:text="${quest.zrQuestionBank.answer}"></span></span>
        </div>
        <div class="selectDiv" th:each="item : ${quest.zrQuestionBank.list}">
            <input type="radio" th:checked="${item.selectStr==quest.myAnswer}" th:id="${item.id}" th:name="${stat.index}+'selectStr'" th:value="${item.selectStr}">
            <span th:text="${item.selectStr}"></span>、
            <label th:for="${item.selectStr}" th:text="${item.itemTitle}"></label>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:src="@{/js/jquery.tmpl.js}"></script>
<script th:inline="javascript">
    var prefix = ctx + "ziran/zrPaper";
    $("#form-zrQuestionBank-edit").validate({
        focusCleanup: true
    });

    $(function() {
        // 初始化数据, 可以由后台传过来
        var data = [[${itemList}]];
        console.log(data)
        var options = {
            data: data,
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            sidePagination: "client",
            columns: [
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                        var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                        var columnId = $.common.sprintf("<input type='hidden' name='list[%s].id' value='%s'>", index, row.id);
                        return columnIndex + $.table.serialNumber(index) + columnId;
                    }
                },
                {
                    field: 'selectStr',
                    align: 'center',
                    title: '选项',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control selectStr' type='text' name='list[%s].selectStr' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'itemTitle',
                    align: 'center',
                    title: '选项内容',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control itemTitle' type='text' name='list[%s].itemTitle' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
                        return '<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\')"><i class="fa fa-remove"></i>删除</a>';
                    }
                }]
        };
        $.table.init(options);
    });

</script>
</body>
</html>